<%@ page contentType = "text/html;charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Henz Mobile</title>
<link rel="stylesheet" type="text/css" href="/css/index.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%=com.henz.web.variable.HenzApp.API_KEY%>"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/jquery.henzBind.js"></script>

<style>

</style>
<script>
$(document).ready(init);

var reportMap;

var detailObj = {
	  CRUD_STATUS:'C'
	, REPORT_TYPE: ''
	, REPORT_CITY: ''
	, REPORT_LONG: ''
	, REPORT_LAT : ''
	, REPORT_NAME: ''
	, REPORT_DESC: ''
};

var curLong;
var curLat;

function init(){
	var mapOptions = {
		  zoom: 11
	};
	reportMap = new google.maps.Map(
		document.getElementById('report_map_area')
		, mapOptions
	);
	
	var browserSupportFlag = false;
	// Try W3C Geolocation (Preferred)
	if(navigator.geolocation) {
		browserSupportFlag = true;
		navigator.geolocation.getCurrentPosition(function(position) {
			/*
			console.log( 'long[' + position.coords.longitude + ']' );
			console.log( 'lat[' + position.coords.latitude + ']' );
			*/
			curLong = position.coords.longitude;
			curLat = position.coords.latitude;
			initialLocation = new google.maps.LatLng(curLat,curLong);
			reportMap.setCenter(initialLocation);
		}, function() {
			handleNoGeolocation(browserSupportFlag);
		});
	}
	// Browser doesn't support Geolocation
	else {
		browserSupportFlag = false;
		handleNoGeolocation(browserSupportFlag);
	}

	function handleNoGeolocation(errorFlag) {
		if (errorFlag == true) {
			alert("Geolocation service failed.");
			initialLocation = newyork;
		} else {
			alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
			initialLocation = siberia;
		}
		reportMap.setCenter(initialLocation);
	}
	  
	$(".detailForm").henzBind({bindObj : detailObj});
	
	search();
	
}

var marketList = [];

function search(){
	for( var mi = 0; mi < marketList.length; mi++ ){
		marketList[ mi ].setMap(null);
	}
	marketList = [];
	$.ajax({
		url :"/report/list.json",
		type:"POST",
		data:{CUR_LAT:curLat,CUR_LONG:curLong},
		success: function(data, textStatus, jqXHR){
			console.log( 'success....' );
			console.log( data );
			
			var listTable = $('.dataList');
			var trNameArr = [ 'oddRow', 'evenRow' ];
			listTable.find( '.dataRow' ).remove();
			
			for( var di = 0 ; di < data.length; di ++ ){
				listTable.append(
					  "<tr class='dataRow " + trNameArr[ ( di % 2 ) ] + "'>"
						+ "	<td>" + data[ di ].REPORT_TYPE + "</td>"
						+ "	<td>" + data[ di ].REPORT_CITY + "</td>"
						+ "	<td>" + data[ di ].REPORT_LONG + "</td>"
						+ "	<td>" + data[ di ].REPORT_LAT + "</td>"
						+ "	<td>" + data[ di ].REPORT_NAME + "</td>"
						+ "	<td>" + data[ di ].REPORT_DESC + "</td>"
					+ "</tr>"
				);
				
				/*
				var myLatlng = new google.maps.LatLng(-25.363882,
						131.044922);
				*/
				var marker = new google.maps.Marker({
					position : new google.maps.LatLng(
							/*
							  curLong + ( 0.5 + ( Math.random() / 10 ) )
							, curLat  + ( 0.5 + ( Math.random() / 10 ) )
							*/
							  data[ di ].REPORT_LAT
								, data[ di ].REPORT_LONG
							)
					, map : reportMap
					, title : 'Report'
				});
				marketList.push( marker );
				
			}

				console.log('success....');
			},
			error : function(jqXHR, textStatus, errorThrown) {
				console.log('error....');
				console.log(errorThrown);
				console.log('error....');
			}
		});
	}

	function save() {
		console.log('save');
		$.ajax({
			url : "/report/add.json",
			type : "POST",
			//data : detailObj,
			data : detailObj,
			success : function(data, textStatus, jqXHR) {
				console.log('success....');
				console.log(data);
				console.log('success....');
			},
			error : function(jqXHR, textStatus, errorThrown) {
				console.log('error....');
				console.log(errorThrown);
				console.log('error....');
			}
		});
	}
</script>
</head>
<body>
<table class="mainTable">
	<tbody>
	<tr>
		<!--
		<td style='width:200px;'>
		-->
		<td class='listCol'>
			<div class='titleArea'>
				Incoming Alert
				<a href='javascript:search();'>search</a>
			</div>
			<div class='dataArea'>
				<table class="dataList">
					<tr>
						<th>Type</th>
						<th>City</th>
						<th>Long</th>
						<th>Lat</th>
						<th>Name</th>
						<th>Desc</th>
					</tr>
				</table>
			</div>
		</td>
		<td class='dataCol'>
			<div class='mapDiv'>
				<div class='titleArea'>
					Alert Location
				</div>
				<div class='dataArea'>
					<div id='report_map_area' class='mapArea'>
						map area
					</div>
				</div>
			</div>
			<div class='detailDiv'>
				<div class='titleArea'>
					Detail Information
					<a href='javascript:save();'>save</a>
				</div>
				<div class='dataArea'>
					<form class='detailForm'>
					<table class="detailData">
						<tr>
							<th>Type</th>
							<td><input type='text' name='REPORT_TYPE'></td>
							<th>City</th>
							<td><input type='text' name='REPORT_CITY'></td>
						</tr>
						<tr>
							<th>Location(long)</th>
							<td><input type='text' name='REPORT_LONG'></td>
							<th>Location(lat)</th>
							<td><input type='text' name='REPORT_LAT'></td>
						</tr>
						<tr>
							<th>Name</th>
							<td><input type='text' name='REPORT_NAME'></td>
							<th>Description</th>
							<td><input type='text' name='REPORT_DESC'></td>
						</tr>
					</table>
					</form>
				</div>
			</div>
		</td>
	</tr>
	</tbody>
</table>
</body>
</html>

